<template>
  <div>
    <div style="marginTop: 5px; marginBottom: 5px">
      <span>1. 请点击 &nbsp;“<span style="color : red">模板</span>” &nbsp;按钮，下载模板。</span>
      <el-button size="mini" type="primary" :loading="exportLoading" icon="el-icon-download" plain @click="downloadTemplate">模 板</el-button>
    </div>
    <div style="marginBottom: 5px">
      <p>2. 点击“<span style="color : red">点击上传</span>”按钮，选择要导入的xls文件，内容为：车系、组合代码、组合名称、是否备件组合、数据来源。</p>
    </div>
    <el-upload
      ref="upload"
      class="importPrice"
      action="/api/dmscloud.repair/importRepairAbleController/importRepairAble "
      accept=".xlsx,.xls"
      :limit="1"
      :headers="headersObj"
      :on-success="showErrorList"
      :on-exceed="handleExceed"
    >
      <el-button size="small" type="primary" plain>点击上传</el-button>
    </el-upload>
  </div>
</template>
<script>
import { getToken, getAppId, getUserId } from '@/assets/js/auth';
import { repairAbleDownload } from '@/api/repair/repairBusiness/repairCombManger';
import { exportExcelFile } from '@/utils/index';
export default {
  data() {
    return {
      headersObj: {
        jwt: getToken(),
        appId: getAppId(),
        userId: getUserId(),
        userAgent: 'pc'
      },
      errorList: [],
      exportLoading: false
    };
  },
  methods: {
    downloadTemplate() {
      this.$confirm('此操作将下载excel模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.exportLoading = true;
        repairAbleDownload().then(res => {
          exportExcelFile(res, '多级经销商授权模板');
          this.exportLoading = false;
        });
      });
    },
    showErrorList(response, file, fileList) {
      if (response.resultCode === 200) {
        this.$notify.success({ title: '提示信息', message: '导入完成!' });
        this.$emit('close', 'refresh');
      } else {
        this.$notify.error({ title: '提示信息', message: response.errMsg });
      }
    },
    handleExceed(files, fileList) {
      this.$message(`只能选择一个文件`);
    }
  }
};
</script>
<style lang="less" scoped></style>>
